<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号设置</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <img src="/static/logo.png" class="page-header_logo">

            <div class="page-header_menu">
                <a class="link-black active" href="/">首页</a>
                <a class="link-black" href="#">客户端</a>
                <a class="link-black" href="/login.html" v-if="!user.id">登录</a>
                <a class="link-black" href="/user/account.html" v-if="user.id">
                    <el-popover placement="bottom" width="200" trigger="hover">
                        <div class="sub-menu">
                            <div>
                                <el-avatar :size="60" style="float: left" :src="user.avatar">
                                    <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                                </el-avatar>
                                <div style="float: left; padding: 10px">
                                    <div class="user-nickname">{{user.nickname}}</div>
                                    <div class="user-mobile">{{user.mobile}}</div>
                                </div>
                            </div>
                            <div class="button-group">
                                <el-link size="small" :underline="false" href="/user/account.html">我的课程</el-link>
                                <el-link size="small" :underline="false" href="/user/setting.html">账号设置</el-link>
                                <el-link size="small" :underline="false" href="/admin/index.html">管理后台</el-link>
                                <el-link size="small" :underline="false" href="/logout.html">退出登录</el-link>
                            </div>
                        </div>
                        <div slot="reference">
                            <el-avatar :size="32" :src="user.avatar" class="page-header_avatar">
                                <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                            </el-avatar>
                            个人中心
                        </div>
                    </el-popover>
                </a>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="panel">
            <div class="panel-title">账号设置</div>
            <div class="panel-body bg-white">
                <el-row>
                    <el-col :span="24">
                        <div class="row-cell">
                            <div class="row-cell_title">头像</div>
                            <div class="row-cell_value">
                                <el-upload
                                        class="avatar-uploader"
                                        ref="upload"
                                        action="/user/avatar"
                                        :show-file-list="false"
                                        :on-change="afterAvatarSelected"
                                        :before-upload="beforeAvatarUpload"
                                        :on-success="avatarUploadSuccess"
                                        :on-error="avatarUploadFail"
                                        :auto-upload="true">

                                    <div class="avatar-mask"></div>
                                    <el-avatar :size="60" style="float: left" :src="user.avatar"></el-avatar>
                                </el-upload>
                            </div>
                        </div>
                        <div class="row-cell">
                            <div class="row-cell_title">
                                <b>昵称</b>
                                <small>给自己取个可爱的昵称吧</small>
                            </div>
                            <div class="row-cell_value">
                                <span>{{user.nickname}}</span>
                                <el-button @click="changeNickname" round>修改</el-button>
                            </div>
                        </div>
                        <div class="row-cell">
                            <div class="row-cell_title">
                                <b>手机号</b>
                                <small>可用手机号登录或找回密码</small>
                            </div>
                            <div class="row-cell_value">
                                <span>{{user.mobile}}</span>
                                <el-button @click="changeMobile" round>修改</el-button>
                            </div>
                        </div>
                        <div class="row-cell">
                            <div class="row-cell_title">
                                <b>密码</b>
                                <small>用于保护账号信息和登录安全</small>
                            </div>
                            <div class="row-cell_value">
                                <el-button @click="changePassword" round>修改</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <div class="page-footer">
        <div class="page-footer_inner">
            <div>Copyright © 2021 All Rights Reserved.</div>
            <div>天津码码教育科技有限公司 版权所有 | 服务协议 | 隐私政策 | 侵权投诉 | 联系客服 | 帮助</div>
        </div>
    </div>

    <el-dialog title="修改昵称" :visible.sync="changeNicknameDialog.show" width="360px" :close-on-click-modal="false">
        <el-input v-model="changeNicknameDialog.form.nickname" placeholder="昵称"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button type="default" @click="changeNicknameDialog.show = false">取消</el-button>
            <el-button type="primary" @click="saveNickname" :disabled="!changeNicknameDialog.form.nickname">保 存</el-button>
        </span>
    </el-dialog>

    <el-dialog title="修改手机号" :visible.sync="changeMobileDialog.show" width="360px" :close-on-click-modal="false">
        <el-input prefix-icon="el-icon-mobile" v-model="changeMobileDialog.form.mobile" placeholder="新手机号">
            <template slot="append">
                <el-link :underline="false" @click="sendCaptcha()" :disabled="!changeMobileDialog.form.mobile || changeMobileDialog.form.mobile.length != 11 || changeMobileDialog.timer != 0">
                    {{changeMobileDialog.timer === 0 ? '发送验证码' : changeMobileDialog.timer + '秒后重试'}}

                </el-link>
            </template>
        </el-input>
        <el-input prefix-icon="el-icon-chat-dot-square" v-model="changeMobileDialog.form.captcha" placeholder="验证码" style="margin-top: 20px"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button type="default" @click="changeMobileDialog.show = false">取消</el-button>
            <el-button type="primary" @click="saveMobile" :disabled="!changeMobileDialog.form.mobile || !changeMobileDialog.form.captcha">保 存</el-button>
        </span>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="changePasswordDialog.show" width="360px" :close-on-click-modal="false">
        <el-input type="password" v-model="changePasswordDialog.form.oldPwd" placeholder="现密码"></el-input>
        <el-input type="password" v-model="changePasswordDialog.form.newPwd" placeholder="新密码" style="margin-top: 20px"></el-input>
        <el-input type="password" v-model="changePasswordDialog.form.newPwdRepeat" placeholder="再次输入新密码" style="margin-top: 20px"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button type="default" @click="changePasswordDialog.show = false">取消</el-button>
            <el-button type="primary" @click="savePassword" :disabled="!changePasswordDialog.form.oldPwd || !changePasswordDialog.form.newPwd">保 存</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},
            changeNicknameDialog: {
                show: false,
                form: {}
            },
            changeMobileDialog: {
                show: false,
                timer: 0,
                form: {
                    mobile: null,
                    captcha: null
                }
            },
            changePasswordDialog: {
                show: false,
                form: {}
            }
        },
        methods: {
            afterAvatarSelected(file) {
                this.user.avatar = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            avatarUploadSuccess: function () {
                this.$message.success('头像保存成功');
            },
            avatarUploadFail: function () {
                this.$message.error('头像保存失败，请稍后重试');
            },
            changeNickname: function () {
                this.changeNicknameDialog.show = true;
                this.changeNicknameDialog.form = {};
            },
            saveNickname: function () {
                let vue = this;

                axios.post('/user/nickname?nickname=' + vue.changeNicknameDialog.form.nickname).then(resp => {

                    vue.$message.success('昵称修改成功');
                    vue.changeNicknameDialog.show = false;
                    vue.user.nickname = vue.changeNicknameDialog.form.nickname;
                });
            },
            changeMobile: function () {
                this.changeMobileDialog.show = true;
                this.changeMobileDialog.form = {}
                this.changeMobileDialog.timer = 0;
            },
            sendCaptcha: function () {
                let vue = this;

                axios.get('/user/mobile/captcha?mobile=' + vue.changeMobileDialog.form.mobile).then(resp => {
                    vue.$message.success('发送成功');

                    vue.changeMobileDialog.timer = 60;
                    let timer = setInterval(function (){
                        if (vue.changeMobileDialog.timer >= 1) {
                            vue.changeMobileDialog.timer--;
                        } else {
                            clearInterval(timer);
                        }
                    }, 1000);
                });
            },
            saveMobile: function () {
                let vue = this;

                axios.post('/user/mobile', vue.changeMobileDialog.form).then(resp => {
                    vue.$message.success('保存成功');

                    vue.changeMobileDialog.show = false;
                    vue.user.mobile = vue.changeMobileDialog.form.mobile;
                });
            },
            changePassword: function () {
                this.changePasswordDialog.show = true;
                this.changePasswordDialog.form = {};
            },
            savePassword: function () {
                let vue = this;

                axios.post('/user/password', vue.changePasswordDialog.form).then(resp => {

                    vue.$message.success('密码修改成功');
                    vue.changePasswordDialog.show = false;

                    window.location.href = '/login.html';
                });

            }
        },
        mounted: function () {
            let vue = this;

            vue.$loadLoginUser().then(user => {
                if (user == null) {
                    window.location.href = '/login.html';
                }
            });
        }
    })
</script>
</html>
